<template>
  <div id="canvas">
    <div id="chartCanvas"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const data = {
  axis1: {
    name: '降水量',
    unit: 'ml',
    data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3],
    max: 250,
  },
  axis2: {
    name: '温度',
    unit: '°C',
    max: 25,
    data: [6.0, 10.2, 10.3, 11.5, 10.3, 13.2, 14.3, 16.4, 18.0, 16.5, 12.0, 5.2],
  },
  bottom: [
    '1 月',
    '2 月',
    '3 月',
    '4 月',
    '5 月',
    '6 月',
    '7 月',
    '8 月',
    '9 月',
    '10 月',
    '11 月',
    '12 月',
  ],
};

onMounted(() => {
  const oContainer = document.getElementById('canvas');
  const oCan = document.getElementById('chartCanvas');
  const ctx = oCan.getContext('2d');

  function adaptDpr(canvas, width, height) {
    const dpr = window.devicePixelRatio;
    canvas.width = Math.floor(width * dpr);
    canvas.height = Math.floor(height * dpr);
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
    ctx.scale(dpr, dpr);
  }
});
</script>

<style lang="scss" scoped></style>
